<template>
  <div class="home">
    <top-menu :data="data" style="height:30px !important" />
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>轧制参数仿真模型</h1>
      </div>
    </div>
    <div class="home-main">
      <el-row class="top h-90%">
        <el-col class="top-left" :span="12">
          <div class="svg" style="width:100%;">
            <svg-load :name="technologicalName" width="100%"></svg-load>
          </div>
          <div style="width:120px;position: relative;">
            <el-button
              type="primary"
              size="small"
              style="position: absolute;bottom:5px;left: 0;"
            >轧制能力仿真</el-button>
          </div>
        </el-col>
        <el-col class="top-right" :span="12">
          <div style="width:98%;">
            <new-coil-card title="当前卷和下一卷信息">
              <el-table
                :data="pidMesInfo"
                ref="alarmTableRef"
                style="width: 100%;"
                :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none' }"
                :cell-style="{fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none'}"
                max-height="140px"
                :row-class-name="tableRowClassName"
              >
                <el-table-column prop="ITEM" label width="50" />
                <el-table-column prop="COIL_ID" label="卷号" width="84" />
                <el-table-column prop="STEEL_MARK" label="内部钢种" width="70" />
                <el-table-column prop="STEEL_GRADE" label="钢种" width="50" />
                <el-table-column prop="EN_THICK" label="入口厚度" width="65" />
                <el-table-column prop="EX_THICK" label="出口厚度" width="65" />
                <el-table-column prop="EN_WIDTH" label="入口宽度" width="65" />
                <el-table-column prop="EX_WIDTH" label="出口宽度" width="50" />
                <el-table-column prop="YP" label="屈服强度" width="50" />
                <el-table-column prop="YPINDEX" label="YP分档" width="50" />
                <el-table-column prop="WIDINDEX" label="宽度分档" width="50" />
                <el-table-column prop="THKINDEX" label="厚度分档" />
              </el-table>
            </new-coil-card>
          </div>
        </el-col>
      </el-row>

      <div class="middle">
        <div class="middle_left">
          <div class="base_table">
            <el-table
              :data="rollingSimulationStore2"
              ref="alarmTableRef"
              style="width: 100%;border:1px solid"
              :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none' }"
              :cell-style="{fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none'}"
              max-height="320px"
              class="std"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="ITEM" label width="83" />
              <el-table-column prop="STD5" label="S5机架" header-align="center">
                <el-table-column prop="STD5" width="60" />
                <el-table-column prop="STD5A" width="60">
                  <template #default="{ row }">
                    <span style="color:blue;">{{ row.STD5A }}</span>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column label="S4机架" header-align="center">
                <el-table-column prop="STD4" width="60" />
                <el-table-column prop="STD4A" width="60">
                  <template #default="{ row }">
                    <span style="color:blue;">{{ row.STD4A }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="S3机架" header-align="center">
                <el-table-column prop="STD3" width="60" />
                <el-table-column prop="STD3A" width="60">
                  <template #default="{ row }">
                    <span style="color:blue;">{{ row.STD3A }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="S2机架" header-align="center">
                <el-table-column prop="STD2" width="60" />
                <el-table-column prop="STD2A" width="60">
                  <template #default="{ row }">
                    <span style="color:blue;">{{ row.STD2A }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="S1机架" header-align="center">
                <el-table-column prop="STD1" width="60" />
                <el-table-column prop="STD1A" width="60">
                  <template #default="{ row }">
                    <span style="color:blue;">{{ row.STD1A }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="BEFORE" label="机架前">
                <template #default="{ row }">
                  <span style="color:blue;">{{ row.BEFORE }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="middle_right">
          <el-row>
            <el-col>
              <new-coil-card title="张力和变形抗力系数">
                <el-table
                  :data="pidMesInfo3"
                  ref="alarmTableRef"
                  style="width: 95%;border:1px solid;height:200px"
                  :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none' }"
                  :cell-style="{fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none'}"
                  max-height="200px"
                  class="custom-table"
                  empty-text
                  :row-class-name="tableRowClassName"
                >
                  <template #empty>
                    <div class="custom-no-data">
                      <img src="/@/assets/images/nodata.png" alt="No Data Background" />
                    </div>
                  </template>
                  <el-table-column prop="ITEM" label="S1" width="140"></el-table-column>

                  <el-table-column prop="COIL_ID" label="S2" width="140"></el-table-column>
                  <el-table-column prop="STEEL_MARK" label="S3" width="140"></el-table-column>
                  <el-table-column prop="STEEL_MARK" label="S4" width="140"></el-table-column>
                  <el-table-column prop="STEEL_MARK" label="S5"></el-table-column>
                </el-table>
              </new-coil-card>
            </el-col>
          </el-row>

          <new-coil-card title="负荷分配优化" style="margin-top:3px;height:220px !import">
            <el-table
              :data="pidMesInfo4"
              ref="alarmTableRef"
              style="width: 95%;border:1px solid;height:220px;"
              :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none' }"
              :cell-style="{fontSize:'10px',borderTop: '1px solid #7D81B2',
borderLeft: '1px solid #7D81B2',
borderBottom: 'none',
borderRight: 'none'}"
              max-height="220px"
              empty-text
              :row-class-name="tableRowClassName"
            >
              <template #empty>
                <div class="custom-no-data">
                  <img src="/@/assets/images/nodata.png" alt="No Data Background" />
                </div>
              </template>
              <el-table-column prop="ITEM" label="YP分档" width="52" />
              <el-table-column prop="COIL_ID" label="宽度分档" width="52" />
              <el-table-column prop="STEEL_MARK" label="厚度分配" width="52" />
              <el-table-column label="初始负荷" header-align="center">
                <el-table-column prop="STEEL_MARK" label="S1" width="52" />
                <el-table-column prop="STEEL_MARK" label="S2" width="52" />
                <el-table-column prop="STEEL_MARK" label="S3" width="50" />
                <el-table-column prop="STEEL_MARK" label="S4" width="50" />
                <el-table-column prop="STEEL_MARK" label="S5" width="50" />
              </el-table-column>
              <el-table-column label="优化后负荷" header-align="center">
                <el-table-column prop="STEEL_MARK" label="S1" width="50" />
                <el-table-column prop="STEEL_MARK" label="S2" width="50" />
                <el-table-column prop="STEEL_MARK" label="S3" width="50" />
                <el-table-column prop="STEEL_MARK" label="S4" width="50" />
                <el-table-column prop="STEEL_MARK" label="S5" />
              </el-table-column>
            </el-table>
          </new-coil-card>
        </div>
      </div>
      <div class="footer">
        <el-row>
          <el-col :span="3">
            <div style="height: 240px;padding-left:10px;width:150px;padding-top:30px">
              <nercar-echarts
                :graphic="echartsListOptions[0].graphic"
                :title="echartsListOptions[0].title"
                :grid="echartsListOptions[0].grid"
                :x-axis="echartsListOptions[0].xAxis"
                :y-axis="echartsListOptions[0].yAxis"
                :tooltip="echartsListOptions[0].tooltip"
                :series="echartsListOptions[0].series"
              />
              <!-- <new-coil-card title="P4与退火曲线实时对比">
                        <cpc-width :act-width="p4Array" :set-width="setP4" :set-width2="setP4_2" :xdata="p4XdArray" :series-name="graphPropsName.p4" />
              </new-coil-card>-->
            </div>
          </el-col>
          <el-col :span="3">
            <div style="height: 240px;width:150px;padding-top:30px">
              <nercar-echarts
                :graphic="echartsListOptions[1].graphic"
                :title="echartsListOptions[1].title"
                :grid="echartsListOptions[1].grid"
                :x-axis="echartsListOptions[1].xAxis"
                :y-axis="echartsListOptions[1].yAxis"
                :tooltip="echartsListOptions[1].tooltip"
                :series="echartsListOptions[1].series"
              />
            </div>
          </el-col>
          <el-col :span="3">
            <div style="height: 240px;width:150px;padding-top:30px">
              <nercar-echarts
                :graphic="echartsListOptions[2].graphic"
                :title="echartsListOptions[2].title"
                :grid="echartsListOptions[2].grid"
                :x-axis="echartsListOptions[2].xAxis"
                :y-axis="echartsListOptions[2].yAxis"
                :tooltip="echartsListOptions[2].tooltip"
                :series="echartsListOptions[2].series"
              />
            </div>
          </el-col>
          <el-col :span="3">
            <div style="height: 240px;width:150px;padding-top:30px">
              <nercar-echarts
                :graphic="echartsListOptions[3].graphic"
                :title="echartsListOptions[3].title"
                :grid="echartsListOptions[3].grid"
                :x-axis="echartsListOptions[3].xAxis"
                :y-axis="echartsListOptions[3].yAxis"
                :tooltip="echartsListOptions[3].tooltip"
                :series="echartsListOptions[3].series"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import {
  ref,
  onBeforeMount,
  onUnmounted,
  onMounted,
  onBeforeUnmount,
  reactive
} from "vue";
import NewCoilCard from "/@/components/NewCoilCard/NewCoilCard.vue";
import NercarEcharts from "/@/components/NercarEcharts/NercarEcharts.vue";
import CpcWidth from "/@/components/CpcWidth/CpcWidth.vue";
import * as echarts from "echarts";
import useHeaderStore from "/@/store/HeaderStore";
import { refreshSVG, initialSVG, refreshGraphical } from "/@/common/refreshSVG";
import { weldType } from "/@/components/home/HomeWeld.vue";
import { coilOpenType } from "/@/components/home/HomeOpenCoil.vue";
import request from "/@/plugins/request/globleRequest";
import { rollingSimulationStore } from "/@/store/rollingsimulation/index";
import { weldMachineState } from "/@/views/common/FulllineTrack/full.line.track.status";
import TopMenu from "/@/components/TopMenu/TopMenu.vue";
import { categoryApi } from "/@/api/business/category/category-api";
import { rollingSimulationApi } from "/@/api/RollingSimulation/index";
import {rollingMillStatusHandel} from '/@/views/common/FulllineTrack/RollingMillVibration';
import axios from 'axios';
const stopStatus = ref<boolean>(false);
const technologicalName = "TCM2280";
let intervalId: any;
let intervalId10min: any;
let intervalId500min: any;
let prePorCoilId: string;
const inletLooper = ref<number>(0);
const exportLooper = ref<number>(0);
const techLooperData = ref<number>(0);
const lastCoilId = ref<string>("");
const realCoilId = ref<string>("");
const coilIds = ref<Array<string>>([]);
const coilData = ref<any>([]);
const pidMesInfo = ref(rollingSimulationStore);


const ITEMS = [
  "出口厚度[mm]",
  "速度[m/min]",
  "前滑[Per Uint]",
  "轧制力[kN]",
  "下一卷轧制力[kN]",
  "转矩[kN·m]",
  "电机功率[kW]",
  "辊缝[mm]",
  "工作辊弯辊力[kN]",
  "中间辊弯辊力[kN]",
  "窜辊量[mm]",
  "张力[kN]",
  "工作辊辊径[mm]",
  "压下率[%]",
  "压下量[mm]",
  "压下量[mm]"
];
const arrayList = ITEMS.map(ITEM => ({
  ITEM: ITEM,
  UNIT: "",
  BEFORE: "",
  BEFOREA: "",
  STD1: "",
  STD1A: "",
  STD2: "",
  STD2A: "",
  STD3: "",
  STD3A: "",
  STD4: "",
  STD4A: "",
  STD5: "",
  STD5A: ""
}));
const rollingSimulationStore2 = reactive(arrayList);

const pidMesInfo3 = ref();
const pidMesInfo4 = ref();
const dailyProduction = ref({});
const dailyTopProd = ref({});
const monthProduction = ref({});
const monthTopProd = ref({});
const monthSet = ref({});
const monthRate = ref({});
const hourData = ref<any[]>();
const dayTop = ref<any>({});
const monthTop = ref<any>({});
const lastDayTop = ref<any>({});
const lastMonthTop = ref<any>({});
// 开卷机数据
const openCoilOneObj = ref<coilOpenType | null>(null);
const openCoilTwoObj = ref<coilOpenType | null>(null);

// 卷取机目标厚度
const Targetthickness = ref(0);

const rollCoilId = ref<string>("");
const coilCoilId = ref<string>("");

const rollCoilData = ref<any>(null);
const rollCoilAllTime = ref<any>("-");
const rollCoilLeftTime = ref<any>("-");

const data = ref([
  { name: "轧制仿真计算", url: "/rollingsimulation/rollingsimulation" },
  { name: "仿真案例管理", url: "/rollingsimulation/case" },
  { name: "酸轧计划仿真", url: "/rollingsimulation/acidrollingplan" },
  { name: "酸轧生产实际", url: "/rollingsimulation/acidrollingproduct" },
  { name: "高强钢张力优化", url: "/rollingsimulation/steeloptimization" },
  { name: "工艺参数推优", url: "/rollingsimulation/processoptimization" }
]);

const tableRowClassName = ({ row, rowIndex }) => {
  //rowIndex从0开始计算
  // console.log(rowIndex)
  if (rowIndex % 2 != 0) {
    return "warning-row";
  }
  return "";
};

const echartsListOptions = [
  {
    title: {
      show: true,
      text: "",
      textStyle: {
        color: "#fff"
      }
    },
    graphic: [
      {
        type: "text",
        bottom: 45, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "5%",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["S1", "S2", "S3", "S4", "S5"],
        splitLine: { show: false },
        axisLabel: {
          show: true,
          fontSize: 8
        }
      }
    ],
    yAxis: {
      type: "value",
      name: "轧制力/10kN",
      nameTextStyle: {
        fontSize: "8px",
        color: "#fff" // 设置 y 轴名称的颜色为红色
      },
      scale: true, //纵坐标自适应
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        fontSize: 8
      }
    },
    series: [
      {
        name: "",
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1,
          shadowColor: "rgba(93, 209, 250, 0.8)",
          shadowBlur: 10
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      }
    ]
  },
  {
    title: {
      show: true,
      text: "",
      textStyle: {
        color: "#fff"
      }
    },
    graphic: [
      {
        type: "text",
        bottom: 45, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "2%",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["BR-S1", "S1-S2", "S2-S3", "S3-S4", "S4-S5"],
        splitLine: { show: false },
        axisLabel: {
          show: true,
          fontSize: 8,
          interval: 0
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "张力/10kN",
        nameTextStyle: {
          fontSize: "8px",
          color: "#fff" // 设置 y 轴名称的颜色为红色
        },
        scale: true, //纵坐标自适应
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          fontSize: 8
        }
      }
    ],
    series: [
      {
        name: "",
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      }
    ]
  },
  {
    title: {
      show: true,
      text: "",
      textStyle: {
        color: "#fff"
      }
    },
    graphic: [
      {
        type: "text",
        bottom: 45, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["S1", "S2", "S3", "S4", "S5"],
        splitLine: { show: false },
        axisLabel: {
          show: true,
          fontSize: 8
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "弯辊力/%",
        nameTextStyle: {
          fontSize: "8px",
          color: "#fff" // 设置 y 轴名称的颜色为红色
        },
        scale: true, //纵坐标自适应
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          fontSize: 8
        }
      }
    ],
    series: [
      {
        name: "",
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      }
    ]
  },
  {
    title: {
      show: true,
      text: "",
      textStyle: {
        color: "#fff"
      }
    },
    graphic: [
      {
        type: "text",
        bottom: 45, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "5%",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["Entry", "S1", "S2", "S3", "S4", "S5"],
        splitLine: { show: false },
        axisLabel: {
          show: true,
          fontSize: 8,
          interval: 0
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "轧制速度m/min",
        nameTextStyle: {
          fontSize: "8px",
          color: "#fff" // 设置 y 轴名称的颜色为红色
        },
        scale: true, //纵坐标自适应
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          fontSize: 8
        }
      }
    ],
    series: [
      {
        name: "",
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "bar",
        stack: "x",
        smooth: false,
        lineStyle: {
          width: 1
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(58, 218, 255, 0.8)" },
            { offset: 1, color: "rgba(11, 41, 96, 0.1)" }
          ])
        },
        symbolSize: 1,
        symbol: "circle"
      }
    ]
  },
  {
    title: {
      show: true,
      text: "",
      textStyle: {
        color: "#fff"
      }
    },
    graphic: [
      {
        type: "text",
        bottom: 45, // 距离底部的固定距离
        right: 16, // 距离底部的固定距离
        style: {
          text: "(m)", // X轴名称
          fill: "#fff",
          fontSize: 14,
          align: "center"
        }
      }
    ],
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none"
        },
        restore: {},
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: { color: "#fff" },
        crossStyle: { color: "#6d7882" }
      }
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "15%",
      containLabel: true
    },
    dataZoom: [
      {
        type: "slider", //滑动条
        show: true, //开启
        xAxisIndex: [0]
      }, //X轴内置滑动
      {
        type: "inside", //内置滑动，随鼠标滚轮展示
        xAxisIndex: [0]
      }
    ],
    xAxis: [
      {
        type: "category",
        data: ["A", "B", "C", "D", "E", "F", "G", "H"],
        splitLine: { show: false }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "弯辊力/%",
        nameTextStyle: {
          color: "#fff" // 设置 y 轴名称的颜色为红色
        },
        scale: true, //纵坐标自适应
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "",
        data: [10, 22, 28, 43, 49, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: true,
        lineStyle: {
          width: 1
        },
        symbolSize: 1
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: true,
        lineStyle: {
          width: 1
        },
        symbolSize: 1
      },
      {
        data: [5, 4, 3, 5, 10, 32, 14, 11],
        type: "line",
        stack: "x",
        smooth: true,
        lineStyle: {
          width: 1
        },
        symbolSize: 1
      }
    ]
  }
];
interface Zone {
  distance: string;
  entId: string;
  header: string;
  ti: string;
  wplen: string;
}

const TVData = ref({});
const tableData: any = ref([])
// 焊机数据+焊缝检测数据
const weldData = ref<{
  wpd1Obj: weldType | null;
  wpd2Obj: weldType | null;
  wpd3Obj: weldType | null;
  wpd4Obj: weldType | null;
}>({
  wpd1Obj: null,
  wpd2Obj: null,
  wpd3Obj: null,
  wpd4Obj: null
});

const headerStore = useHeaderStore();

function restApiFn() {
  let param = {
    name: "TCM2280_RealData"
  };
  rollingSimulationApi.rest(param).then(res => {
    const obj = res.data;
    const arr = [
      [
        "M_400_207NI",
        "M_400_212NI",
        "",
        "",
        "M_400_205NI",
        "",
        "",
        "",
        "",
        "",
        ""
      ],
      [
        "M_400_262NI",
        "M_403_123NI",
        "M_506_123NI",
        "M_506_113NI",
        "M_403_113NI",
        "",
        "M_506_142NI",
        "M_506_132NI",
        "M_506_122NI",
        "M_506_112NI",
        "M_506_102NI"
      ],
      [
        "M_400_40BR",
        "M_400_38BR",
        "",
        "",
        "M_400_32BR",
        "",
        "M_400_39BR",
        "M_400_37BR",
        "",
        "",
        "M_400_34BR"
      ],
      [
        "M_505_152NI",
        "M_505_151NI",
        "M_505_150NI",
        "M_505_149NI",
        "M_505_148NI",
        "",
        "M_505_136NI",
        "M_505_135NI",
        "M_505_134NI",
        "M_505_133NI",
        "M_505_132NI"
      ],
      [
        "M_406_422NI",
        "M_406_392NI",
        "M_406_362NI",
        "M_406_332NI",
        "M_406_302NI",
        "",
        "",
        "",
        "",
        "",
        ""
      ],
      [
        "M_506_144NI",
        "M_506_134NI",
        "M_506_124NI",
        "M_506_114NI",
        "M_506_104NI",
        "",
        "",
        "",
        "",
        "",
        ""
      ],
      [
        "M_505_248NI",
        "M_505_247NI",
        "M_505_246NI",
        "M_505_245NI",
        "M_505_244NI",
        "",
        "",
        "",
        "",
        "",
        ""
      ],
      [
        "L_RT_GAGREF_5",
        "L_RT_GAGREF_4",
        "L_RT_GAGREF_3",
        "L_RT_GAGREF_2",
        "L_RT_GAGREF_1",
        "",
        "L_RT_GAGREF_5",
        "L_RT_GAGREF_4",
        "L_RT_GAGREF_3",
        "L_RT_GAGREF_2",
        "L_RT_GAGREF_1"
      ],
      [
        "M_505_163NI",
        "M_505_162NI",
        "M_505_161NI",
        "M_505_160NI",
        "M_505_159NI",
        "",
        "M_505_147NI",
        "M_505_146NI",
        "M_505_145NI",
        "M_505_144NI",
        "M_505_143NI"
      ],
      [
        "M_505_225NI",
        "M_505_224NI",
        "M_505_223NI",
        "M_505_222NI",
        "M_505_221NI",
        "",
        "M_505_215NI",
        "M_505_214NI",
        "M_505_213NI",
        "M_505_212NI",
        "M_505_211NI"
      ],
      [
        "M_535_115NI",
        "M_534_115NI",
        "M_533_115NI",
        "M_532_115NI",
        "M_531_115NI",
        "",
        "",
        "",
        "",
        "",
        ""
      ],
      [
        "M_400_352NI",
        "M_400_350NI",
        "M_400_348NI",
        "M_400_346NI",
        "M_400_344NI",
        "M_400_342NI",
        "M_400_349NI",
        "M_400_347NI",
        "M_400_345NI",
        "M_400_343NI",
        "M_400_341NI"
      ],
      [
        "L_TCM_S5BWRD",
        "L_TCM_S4BWRD",
        "L_TCM_S3BWRD",
        "L_TCM_S2BWRD",
        "L_TCM_S1BWRD",
        "",
        "",
        "",
        "",
        "",
        ""
      ],
      ["", "", "", "", "", "", "", "", "", "", ""],
      ["", "", "", "", "", "", "", "", "", "", ""]
    ];
    for (let i = 0; i < rollingSimulationStore2.length - 3; i++) {
      rollingSimulationStore2[i].STD5A = arr[i][0]
        ? Number(obj[arr[i][0]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD4A = arr[i][1]
        ? Number(obj[arr[i][1]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD3A = arr[i][2]
        ? Number(obj[arr[i][2]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD2A = arr[i][3]
        ? Number(obj[arr[i][3]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD1A = arr[i][4]
        ? Number(obj[arr[i][4]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].BEFORE = arr[i][5]
        ? Number(obj[arr[i][5]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD5 = arr[i][6]
        ? Number(obj[arr[i][6]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD4 = arr[i][7]
        ? Number(obj[arr[i][7]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD3 = arr[i][8]
        ? Number(obj[arr[i][8]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD2 = arr[i][9]
        ? Number(obj[arr[i][9]]).toFixed(3)
        : "-";
      rollingSimulationStore2[i].STD1 = arr[i][10]
        ? Number(obj[arr[i][10]]).toFixed(3)
        : "-";
    }
  });
}
onBeforeMount(() => {
  headerStore.setHeaderState(true);
  refreshSecend();
  intervalId = setInterval(() => {
    refreshSecend();
  }, 2000)
  intervalId10min = setInterval(() => {
    refreshSecend();
  }, 1000 * 60 * 10)
});
onMounted(() => {
  restApiFn(); // 立即调用一次
  intervalId500min = setInterval(restApiFn, 500); // 每隔 5 秒调用
});
onBeforeUnmount(() => {
  if (intervalId500min) clearInterval(intervalId500min);
});
onUnmounted(() => {
  clearInterval(intervalId);
  clearInterval(intervalId10min);
});

const refreshSecend = () => {
  getZoneTrk();
  getAlarm();
  getRollingMillVibration()
};

const getZoneTrk = async () => {
  let param = {
    name: "TCM2280_zonetrk"
  };
  rollingSimulationApi.rest(param).then(res => {

    weldMachineState(`${technologicalName}-welder`, res.data.weld);
    inletLooper.value = res.data["loop"][0];
    techLooperData.value = res.data["loop"][1];
    exportLooper.value = res.data["loop"][2];
    let zones = res.data.zoneno;
    let trKey = `${technologicalName}-ZONE_tr${res.data.tr}`;
    let trpathKey = trKey + "_path";
    let porKey = `${technologicalName}-ZONE_por${res.data.por}`;
    let porpathKey = porKey + "_path";
    let ti: any;
    var arr = Object.keys(zones);
    /** 获取当前卷信息 */
    //getCoilData(zones);
    /**卷取机和开卷机 */
    refreshSVG(zones[arr.length - 1].ti % 10, trpathKey);
    refreshGraphical(zones[arr.length - 1].ti % 10, trKey);
    // initialSVG(technologicalName, 'tr', res.tr);
    if (ti === null || ti !== zones[0].ti) {
      ti = zones[0].ti;
      console.log(porKey+":"+zones[0].ti % 10)
      refreshSVG(zones[0].ti % 10, porpathKey);
      refreshGraphical(zones[0].ti % 10, porKey);
      initialSVG(technologicalName, "por", res.data.por);
    }
    if (res.data.por === 0) {
      initialSVG(technologicalName, "por", "1");
      initialSVG(technologicalName, "por", "2");
    }
    for (let i in zones) {
      let pathkey = `${technologicalName}-ZONE${i}`;
      refreshSVG(zones[i].ti % 10, pathkey);
    }

    weldData.value.wpd1Obj = {
      titleMsg: "#1WPD",
      coilNo: zones[7].entId,
      range: parseInt(zones[7].wplen) / 1000
    };
    weldData.value.wpd2Obj = {
      titleMsg: "#2WPD",
      coilNo: zones[18].entId,
      range: parseInt(zones[18].wplen) / 1000
    };
    weldData.value.wpd3Obj = {
      titleMsg: "#3WPD",
      coilNo: zones[25].entId,
      range: parseInt(zones[25].wplen) / 1000
    };
    weldData.value.wpd4Obj = {
      titleMsg: "#4WPD",
      coilNo: zones[27].entId,
      range: parseInt(zones[27].wplen) / 1000
    };

    let zoneArray = Object.values(zones as Zone[]);
    let curPorCoilId = Object.values(zones as Zone[]).find(
      (obj: Zone) => obj.entId !== "ENTIDBOOK"
    )?.entId;
    let lastProdCoilId = zoneArray[zoneArray.length - 1].entId;
    if (
      lastCoilId.value != lastProdCoilId ||
      realCoilId.value != curPorCoilId
    ) {
      //coilIds.value = SearchForCoidId(zones)
      //getPidMesInfo();
      //getDayAMonthOut();
      realCoilId.value = curPorCoilId;
      lastCoilId.value = lastProdCoilId;
      getHourCount();
    }
    if (curPorCoilId) {
      if (curPorCoilId !== prePorCoilId) {
        prePorCoilId = curPorCoilId;
        // request("/pdiList/getPdiData", { coilId: curPorCoilId }).then(
        //   (result: any) => {
        //     if (result) {
        //       if (Number(res.data["por"]) === 1) {
        //         openCoilOneObj.value = {
        //           coilNo: result["ENTID"],
        //           thick: result["THICK"],
        //           length: result["LENGTH"],
        //           width: result["WIDTH"],
        //           c_gradename: result["C_GRADENAME"]
        //         };
        //         openCoilTwoObj.value = null;
        //       } else {
        //         openCoilOneObj.value = null;
        //         openCoilTwoObj.value = {
        //           coilNo: result["ENTID"],
        //           thick: result["THICK"],
        //           length: result["LENGTH"],
        //           width: result["WIDTH"],
        //           c_gradename: result["C_GRADENAME"]
        //         };
        //       }
        //     } else {
        //       openCoilOneObj.value = null;
        //       openCoilTwoObj.value = null;
        //     }
        //   }
        // );
      }
    } else {
      openCoilOneObj.value = null;
      openCoilTwoObj.value = null;
    }
    segmentStop(res.data.speed);

    coilCoilId.value = zones[36].entId;
    let nowRollCoilId = zones[29].entId;
    if (nowRollCoilId !== rollCoilId.value) {
      rollCoilId.value = nowRollCoilId;
      //getRollCoilData(nowRollCoilId);
    }
  });
};

const getAlarm = async () => {
  let param = {
    name: "TCM2280_RuleTopic"
  };
  rollingSimulationApi.rest(param).then(res => {
    if (res) {
      const alarmList = []
      const normalList = []
      for (const key in res) {
        if (Object.prototype.hasOwnProperty.call(res, key)) {
          const element = res[key];
          if (element.result === 1) {
            alarmList.push(element);
          } else {
            normalList.push(element)
          }
        }
      }
      const allList = alarmList.concat(normalList);
      tableData.value = allList;
    }

  })


}

const getRollingMillVibration = async () => {
  // rollingSimulationApi.mq(param).then(res => {
  //   rollingMillStatusHandel(res);
  // })

  const param = {
    action:'get_tags',
    operator:'abc',
    terminal:'FM_01',
    body: [
      {
        tagName:'tcm_s5_roll_speed_act',
        timestamp:0
      },
      {
        tagName:'tcm_s4_roll_speed_act',
        timestamp:0
      },
      {
        tagName:'tcm_s3_roll_speed_act',
        timestamp:0
      },
      {
        tagName:'tcm_s2_roll_speed_act',
        timestamp: 0
      },
      {
        tagName:'tcm_s1_roll_speed_act',
        timestamp: 0
      },
    ],
  };

  rollingSimulationApi.HMI(param).then(res => {

    let data="{\"1#_std\":\"";
    // let data={"1#_std":"0","2#_std":"0","3#_std":"0","4#_std":"0","5#_std":"0"}
    let count=1;
     for (let index = 0; index < res.data.results.length; index++) {
       
       if(res.data.results[index].value>400){
         data+=3;
         count++;
         if(index!=res.data.results.length-1){
           data+="\",\""+count+"#_std\":\""
         }else{
           data+="\"}"
         }
       }else{
         if(index!=res.data.results.length-1){
           data+="0\",\""+count+"#_std\":\""
         }else{
           data+="0\"}"
         }
       }
     }

    let params = JSON.parse(data);
    rollingMillStatusHandel(params);
  })

  

}


//获取钢卷信息
const getRollCoilData = async (coilId: string) => {
  rollCoilData.value = await request(`/mes/queryByCoilId`, { coilId });
  rollCoilAllTime.value = rollCoilData.value["OUTPUT_SE"];
  rollCoilLeftTime.value = rollCoilAllTime.value;
};

const getCoilData = async (zones: any) => {
  let coilId = zones[28].entId;
  let lastId: any = "";
  for (let index = 29; index > 0; index--) {
    const element = zones[index];
    if (coilId != element.entId) {
      lastId = element.entId;
      break;
    }
  }
  request("/req/pdo/getPidCoilData", {
    coilId: coilId,
    lastCoilId: lastId
  }).then((result: any) => {
    Targetthickness.value = result[0]["F_CONTROLTHICK"];
    // console.log('====================================');
    // console.log("result[0]['F_CONTROLTHICK']",result[0]['F_CONTROLTHICK']);
    // console.log('====================================');
    coilData.value = result;
  });
};

const entStop = ref<boolean>(false);

const tchStop = ref<boolean>(false);

const cirStop = ref<boolean>(false);

const rollStop = ref<boolean>(false);

const segmentStop = (speeds: any[]) => {
  const entState = speeds[0] * 1 == 0;
  const tchState = speeds[2] * 1 == 0;
  const cirState = speeds[4] * 1 == 0;
  const rollState = speeds[5] * 1 == 0;
  if (entStop.value != entState) {
    entStop.value = entState;
    //rollStateFun(entState, 1, 34);
  }
  if (tchStop.value != tchState) {
    tchStop.value = tchState;
    //rollStateFun(tchState, 35, 52);
  }
  if (cirStop.value != cirState) {
    cirStop.value = cirState;
    //rollStateFun(cirState, 53, 68);
  }
  if (rollStop.value != rollState) {
    rollStop.value = rollState;
    //rollStateFun(rollState, 69, 79);
  }
};

const getPidMesInfo = async () => {
  await request("/mes/pdiData", { coilIds: coilIds.value.coilIds }).then(
    (result: any) => {
      pidMesInfo.value = result.reverse();
      for (let index = 0; index < result.length; index++) {
        const element = result[index];
        if (element.INNER_IN_MAT_NO == realCoilId.value) {
          TVData.value = {
            value: element.OUTPUT_PH,
            title: "小时吨钢"
          };
          break;
        }
      }
    }
  );
};

const getDayAMonthOut = () => {
  request("/prod/queryProdDayAndMonth", {}).then((result: any) => {
    const {
      dayOut,
      monthOut,
      dayOutTop,
      monthOutTop,
      monthOutRate,
      monthOutSet
    } = result;
    dailyProduction.value = {
      value: dayOut,
      title: "日产量",
      needFormat: false
    };
    dailyTopProd.value = {
      value: dayOutTop,
      title: "日产记录",
      needFormat: false
    };
    monthProduction.value = {
      value: monthOut,
      title: "月产量",
      needFormat: false
    };
    monthTopProd.value = {
      value: monthOutTop,
      title: "月产记录",
      needFormat: false
    };

    monthSet.value = {
      value: monthOutSet,
      title: "月设定产量",
      needFormat: false
    };
    monthRate.value = {
      value: monthOutRate,
      title: "月完成率",
      needFormat: false,
      unit: "%"
    };
    dayTop.value = result.dayTop;
    monthTop.value = result.monthTop;
    lastDayTop.value = result.lastDayTop;
    lastMonthTop.value = result.lastMonthTop;
  });
};
const getHourCount = async () => {
  //hourData.value = await postRequest("/req/pdo/getCoilHourOut", {});
};
</script>

<style scoped lang="less">
.home {
  width: 100vw;
  background: url(/@/assets/images/home/body-bg.jpg) no-repeat;

  .home-main {
    height: 100%;

    .top {
      width: 100%;
    }

    .middle {
      width: 100%;
      height: 280px;

      .svg {
        width: 100%;
        height: 100%;

        svg {
          margin-top: 4vh;
          width: 100%;
          height: 100%;
        }
      }
    }

    .footer {
      width: 100%;
      height: 240px;
    }
  }
}

.header {
  height: 10vh;
  background-image: url(/src/assets/img/head-bg.png);
  background-size: 100% 100%;
}

.svg-bldIcom {
  position: absolute;
  width: 5vw;
  height: 4vh;
  left: 0.5vw;
  top: 1.5vh;
  z-index: 999;
}

.middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1vh;
}

.middle_left {
  display: grid;
  grid-template-rows: 18vh 18vh;
  grid-column-gap: 1vh;
}

// .middle_right {
//   display: grid;
//   grid-template-rows: 32vh 32vh;
//   grid-column-gap: 1vh;

// }

.base_table {
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-content: center;
}

::v-deep .el-table,
.el-table__expanded-cell {
  // margin-left: 5px !important;
  background-color: transparent !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table tbody {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  //border: none !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td {
  padding-top: 4px;
  padding-bottom: 4px;
}

:deep(.el-table tr) {
  background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
  background-color: #173d91;
}

.top {
  display: flex;
}

.top-right {
  padding: 35px 22px 0 5px;
}

:deep(.el-table .cell) {
  line-height: 10px;
}

::v-deep .containerContent {
  justify-content: left !important;
}

.no-top-border {
  border-top: none !important; /* 使用 !important 来确保优先级 */
}

.el-table {
  --el-table-border-color: #022960;
}
::v-deep .std tr:last-child {
  display: none;
}

.custom-no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ensure the container takes full height */
}
.custom-no-data img {
  max-width: 100%; /* Ensure the image does not overflow its container */
  max-height: 100%; /* Ensure the image does not overflow its container */
  margin-top: 15px;
}

::v-deep .el-table .warning-row {
  background: #223671 !important;
}
</style>